<template>
  <div>
    <h1>动态列表</h1>
    <el-divider content-position="left">动态列表</el-divider>
    <el-table :data="trendData.result">
      <el-table-column label="用户昵称">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
        </template>

      </el-table-column>
      <el-table-column label="动态图片" >
        <template slot-scope="scope">
          <el-image :src="scope.row.trends_image" fit="contain" style="width: 200px;">

          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="动态内容">
        <template slot-scope="scope">
          {{ scope.row.trends_text }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="deleteTrend(scope.row.trends_id)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
     background
      layout="->,total,prev,pager,next,jumper"
      :current-page="trendData.page"
      :total="trendData.count"
      :page-size="trendData.pagesize"
      @current-change="changeCurrent($event)"
    >
    </el-pagination>

  </div>
</template>

<script>
import httpApi from '@/http'
  export default {
    data() {
      return {
        trendData:{
          page:1,
          pagesize:5,
          count:0
        }
      }
    },
    mounted () {
      this.listTrends();
    },
    methods: {

      changeCurrent(page){
        console.log(page);
        this.trendData.page = page
        this.listTrends()
      },

      /** 列出动态列表 */
      listTrends() {
        let params = {
          page:this.trendData.page,
          pagesize:this.trendData.pagesize
        }
        console.log(params);
        httpApi.trendsApi.trendsList(params).then((res)=>{
          console.log('动态列表：',res);
          this.trendData = res.data.data
        })
      },

      /** 删除动态 */
      deleteTrend(trends_id){
        httpApi.trendsApi.delete({trends_id}).then((res)=>{
          console.log('删除的动态：',res);
          if (res.data.code == 200) {
          this.$message({ message: "删除成功", type: "success" });
          // 删除成功后，得计算一下，现在最大页码是多少？
          let maxPage = Math.ceil((this.trendData.count - 1) / this.trendData.pagesize)
          if(maxPage<this.trendData.page){
            this.trendData.page = maxPage
          }
          // 重新加载列表
          this.listTrends();
        } else {
          this.$message({ message: "失败，请稍后再试", type: "error" });
        }
        })
      }

    },
  }
</script>

<style lang="scss" scoped>

</style>